<template>
    <section class="modlude">
        <el-table :data="tableData" stripe style="width: 100%">
            <el-table-column prop="childId" label="设备ID">
            </el-table-column>
            <el-table-column prop="childName" label="设备名称">
                <template slot-scope="scope">
        <el-button v-if="!scope.row.childName && !scope.row.flag" type="primary" size="small" @click="editChildName(scope.row)">编辑</el-button>
        <div v-if="scope.row.childName && !scope.row.flag" @click="editChildName(scope.row)">{{ scope.row.childName }}</div>
        <el-input ref="inputRef" v-if="scope.row.flag" v-model="scope.row.childName" size="small" clearable @blur="submitChildName(scope.row)" @keyup.enter.native="submitChildName(scope.row)"></el-input>
      </template>
            </el-table-column>
            <el-table-column prop="type1" label="状态">
                <template slot-scope="scope">
                  <div v-if="scope.row.type1">{{ scope.row.type1 }}</div>
                  <div v-else>未知</div>
                </template>
            </el-table-column>
            <el-table-column prop="type2" label="相数">
                <template slot-scope="scope">
                  <div v-if="scope.row.type2">{{ scope.row.type2 }}</div>
                  <div v-else>未知</div>
                </template>
            </el-table-column>
            <el-table-column prop="showTime" label="最新时间">
                <!-- <template slot-scope="scope">
                    {{$root.getDateArray(scope.row.gmtModified)[9]}}
                    {{ formatDate(scope.row.gmtModified) }}
                </template> -->
            </el-table-column>
            <!-- <el-table-column prop="" label="状态">
                <template slot-scope="scope">
                    {{scope.row.state == 0?'在线':'离线'}}
                </template>
            </el-table-column> -->
            <!-- <el-table-column prop="description" label="说明">
            </el-table-column> -->
            <el-table-column label="设备状态">
                <template slot-scope="scope">
                    <el-button size="small" type="text" @click="godevicedetails(scope.row)">详情</el-button>
                </template>
            </el-table-column>
            <el-table-column label="报警状态">
                <template slot-scope="scope">
                    <el-button size="small" type="text" @click="goAlarmStatus(scope.row)">详情</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!-- <paging @changePage=handleCurrentPage :get-total='total' :currentPage="1"></paging> -->

        <el-dialog  title="设备状态" :visible.sync="codeShow" width="25%" :close-on-click-modal="false">
            <div class="logInfo">
                <div class="desc">
                <p>{{ selectedDevice.type3 }}</p>
                <p>{{ selectedDevice.type4 }}</p>
                <p>{{ selectedDevice.type5 }}</p>
                <p>{{ selectedDevice.type6 }}</p>
                <p>{{ selectedDevice.type7 }}</p>
                <p>{{ selectedDevice.type8 }}</p>
                <p>{{ selectedDevice.type9 }}</p>
              </div>
              <div class="desc">
                <p>{{ selectedDevice.type10 }}</p>
                <p>{{ selectedDevice.type11 }}</p>
                <p>{{ selectedDevice.type12 }}</p>
                <p>{{ selectedDevice.type13 }}</p>
                <p>{{ selectedDevice.type14 }}</p>
                <p>{{ selectedDevice.type15 }}</p>
                <p>{{ selectedDevice.type16 }}</p>
              </div>
            </div>
            
            <div slot="footer" class="dialog-footer">
                <el-button size="medium " @click="codeShow = false">关 闭</el-button>
            </div>
        </el-dialog>

        <el-dialog title="报警状态" :visible.sync="alarmShow" width="40%" :close-on-click-modal="false">
            <div class="logInfo">
                <div class="desc">
                    <p>设备报警状态:</p>
                <p>{{ selectedDevice.type17 }}</p>
                <p>{{ selectedDevice.type18 }}</p>
                <p>{{ selectedDevice.type19 }}</p>
                <p>{{ selectedDevice.type20 }}</p>
                <p>{{ selectedDevice.type21 }}</p>
                <p>{{ selectedDevice.type22 }}</p>
                <p>{{ selectedDevice.type23 }}</p>
                <p>{{ selectedDevice.type24 }}</p>
              </div>
              <div class="desc">
                <p>报警阈值</p>
                <p>{{ selectedDevice.threshold1 }}</p>
                <p>{{ selectedDevice.threshold2 }}</p>
                <p>{{ selectedDevice.threshold3 }}</p>
                <p>{{ selectedDevice.threshold4 }}</p>
                <p>{{ selectedDevice.threshold5 }}</p>
                <p>{{ selectedDevice.threshold6 }}</p>
                <p>{{ selectedDevice.threshold7 }}</p>
                <p>{{ selectedDevice.threshold8 }}</p>
                <p>{{ selectedDevice.threshold9 }}</p>
                <p>{{ selectedDevice.threshold10 }}</p>
              </div>
            </div>
            <div slot="footer" class="dialog-footer">
                <el-button size="medium " @click="alarmShow = false">关 闭</el-button>
            </div>
        </el-dialog>
    </section>
</template>

<script>
    import paging from "../paging"
    import {getEleInfo,updateEleInfo } from '../../url/api'
    export default {
        data() {
            return {
                tableData: [],
                codeShow:false,
                alarmShow:false,
                selectedDevice:[],
                editable: false
            }
        },
        methods: {
    editChildName(row) {
        row.flag = true
        this.$nextTick(() => {
      this.$refs.inputRef.focus()
    });
    },
    submitChildName(row) {
        console.log(row);
        let params = row
        updateEleInfo(params).then((res) => {
                        if (res.data.ok) {
                            console.log(res);
                            row.flag = false
                        }
                    });
    },
    
            godevicedetails(row){
                this.codeShow = true
                this.selectedDevice = row;
                console.log(row);
            },
            goAlarmStatus(row){
                this.alarmShow = true
                this.selectedDevice = row;
            },
            //时间格式拼接
            formatDate(time) {
            if (time.length < 6) {
            time.push(0); // 当时间秒为00时，后端只会返回五个数字，所以往数组末尾添加默认值 0
          }
            const [year, month, day, hour, minute, second] = time;
            const formattedDate = `${year}-${this.padZero(month)}-${this.padZero(day)}`;
            const formattedTime = `${this.padZero(hour)}:${this.padZero(minute)}:${this.padZero(second)}`;
            return `${formattedDate} ${formattedTime}`;
        },
        padZero(num) {
        return num.toString().padStart(2, '0');
        },
        },
        mounted () {
            getEleInfo().then(res => {
                    this.tableData = res.data.data.map(item =>{
                      return  {
                        ...item,
                        flag:false
                        }
                    })
                    console.log('==================================>',this.tableData);
                })
        },
        components: {
            paging
        },
    }
</script>
<style lang="scss">
    .label_letter {
        font-size: 16px;
        margin-bottom: 10px;
    }

    .label_text {
        font-size: 18px;
    }

    .head_div {
        margin-bottom: 20px;
    }

    .form_div {
        padding-bottom: 20px;
        padding-left: 20px;
    }

    .codediv {
        margin: 20px 0;
        text-align: center;
    }

    .shouquan {
        text-align: center;
        color: black;
        background: #fff;
        padding: 50px 0;
    }

    .qrcode {
        display: inline-block;
    }
    .logInfo{
        display: flex;
        flex-direction:row;
      .desc{
        text-align: center;
        width: 50%;
      p{
        margin-bottom: 20px;
    }  
    }  
    }
    
     
</style>